import React from 'react'
import  Taro  from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'
import Bookone from '../bookOne'

function RenderBookList({bookList}){
  let listi = bookList.reduce((add,item,index)=>{
    let redIndex = ~~(index/3) ;
    ( add[redIndex] ) || ( add[redIndex] = [] )
    add[~~(index/3)].push(item)  
    return add
  },[])
  let listiLast = listi[listi.length-1]
  if(listiLast.length !== 3){
    let newLastArr = Array.from({length:3},(v,i)=>{
      return listiLast[i] ?listiLast[i] : {}
    })
    listi[listi.length-1] = newLastArr
  }

  const handleClick=()=>{
    Taro.navigateTo({url: '/pages/otherPages/bookDetails/index'})
  }

  return (
    <View className='book-main'>
      {listi.map((item,index)=>(<View className='book-main-raw' key={index}>
                  {item.map((v,i)=>(<Bookone bookMsg={v} key={i+v.name} handleClick={handleClick} />))}
                </View>))
      }
    </View>
  )

}

export default RenderBookList

